বুটস্ট্রাপ ৫ এ, Headings, Paragraphs, এবং Lists ব্যবহার করার জন্য সহজ এবং প্রভাবশালী উপায় রয়েছে। এগুলো ব্যবহার করে আপনি ওয়েব পেজের কন্টেন্টকে সুন্দরভাবে সাজাতে পারেন, যাতে পাঠকদের জন্য পড়তে সুবিধাজনক হয় এবং কন্টেন্টের কাঠামো পরিষ্কার থাকে। বুটস্ট্রাপের Typography ক্লাসগুলি এই উপাদানগুলোর জন্য স্টাইলিং প্রদান করে।
HTML-এ ৬টি স্তরের শিরোনাম (H1 থেকে H6) আছে, যা আপনার কন্টেন্টের কাঠামো নির্ধারণে সহায়তা করে। বুটস্ট্রাপ ৫ এ শিরোনামের জন্য প্রিফাইনড স্টাইল রয়েছে যা শিরোনামগুলোকে আরও আকর্ষণীয় ও পাঠযোগ্য করে তোলে।
<h1>এই হলো H1 শিরোনাম</h1>
<h2>এই হলো H2 শিরোনাম</h2>
<h3>এই হলো H3 শিরোনাম</h3>
<h4>এই হলো H4 শিরোনাম</h4>
<h5>এই হলো H5 শিরোনাম</h5>
<h6>এই হলো H6 শিরোনাম</h6>
বুটস্ট্রাপ ৫ এ শিরোনামগুলোর জন্য কিছু অতিরিক্ত ক্লাস দেওয়া আছে যা আপনাকে শিরোনামগুলো স্টাইল করতে সহায়তা করে:
display-1, display-2, display-3, display-4: বড় শিরোনামের জন্য ব্যবহার করা হয়।fw-bold: শিরোনামকে বোল্ড করে।text-center: শিরোনামকে কেন্দ্রস্থলে রাখতে সাহায্য করে।<h1 class="display-3 text-center fw-bold">বড় শিরোনাম</h1>
<h2 class="display-4 text-center">আরেকটি বড় শিরোনাম</h2>
HTML-এ <p> ট্যাগ ব্যবহার করে প্যারাগ্রাফ তৈরি করা হয়। বুটস্ট্রাপ ৫ এ lead ক্লাস ব্যবহার করে আপনি প্যারাগ্রাফের আকার বা ফন্ট স্টাইল কাস্টমাইজ করতে পারেন, যা প্যারাগ্রাফকে আরও স্পষ্ট এবং মনোযোগ আকর্ষণকারী করে তোলে।
<p>এটি একটি সাধারণ প্যারাগ্রাফ। আপনি এতে যে কোনো টেক্সট লিখতে পারেন, এবং এটি সাধারণভাবেই প্রদর্শিত হবে।</p>
<p class="lead">এটি একটি বড় প্যারাগ্রাফ, যার মাধ্যমে আপনি মূল কন্টেন্টের মধ্যে আরও বেশি গুরুত্ব দিতে পারেন।</p>
lead: প্যারাগ্রাফের ফন্ট সাইজ বড় করে, যা গুরুত্বপূর্ণ টেক্সট হাইলাইট করার জন্য ব্যবহার করা যায়।text-center: প্যারাগ্রাফকে কেন্দ্রস্থলে প্রদর্শন করতে ব্যবহৃত হয়।text-muted: টেক্সটের রঙ হালকা করে দেয়, যা সাধারণত সহায়ক টেক্সট বা নোটস এর জন্য ব্যবহৃত হয়।<p class="lead text-center">এটি একটি গুরুত্বপূর্ন এবং কেন্দ্রস্থলে প্রদর্শিত প্যারাগ্রাফ।</p>
<p class="text-muted">এটি একটি হালকা রঙের সহায়ক প্যারাগ্রাফ।</p>
HTML-এ সাধারণত দুটি ধরনের তালিকা থাকে:
<ol>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম</li>
<li>তৃতীয় আইটেম</li>
</ol>
এখানে তালিকা আইটেমগুলো একটি নম্বরের মাধ্যমে সাজানো থাকে।
<ul>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম</li>
<li>তৃতীয় আইটেম</li>
</ul>
এখানে তালিকা আইটেমগুলো পয়েন্টের মাধ্যমে সাজানো থাকে (বুলেট পয়েন্ট)।
বুটস্ট্রাপ ৫ এ list-group ক্লাস রয়েছে, যা তালিকা আইটেমগুলোর জন্য সুনির্দিষ্ট স্টাইলিং প্রদান করে এবং তালিকাকে আরও সুন্দরভাবে উপস্থাপন করে।
list-group: সাধারণ তালিকা তৈরি করে।list-group-item: তালিকা আইটেমের জন্য ব্যবহৃত হয়।list-group-flush: তালিকাকে বর্ডারলেস তৈরি করতে ব্যবহার করা হয়।<ul class="list-group">
<li class="list-group-item">প্রথম আইটেম</li>
<li class="list-group-item">দ্বিতীয় আইটেম</li>
<li class="list-group-item">তৃতীয় আইটেম</li>
</ul>
এখানে list-group ক্লাস তালিকার আইটেমগুলোর মধ্যে ফাঁকা জায়গা রেখে সুন্দরভাবে প্রদর্শন করে।
বুটস্ট্রাপ ৫ এর Headings, Paragraphs, এবং Lists ব্যবহারের মাধ্যমে আপনি ওয়েব পেজে কন্টেন্টকে সুন্দরভাবে সাজাতে পারেন। Typography ক্লাসগুলি এই উপাদানগুলোর জন্য উপযুক্ত স্টাইলিং প্রদান করে, যাতে ওয়েবসাইটের পাঠযোগ্যতা এবং ডিজাইন আরও উন্নত হয়। Headings এবং Paragraphs এর জন্য সহজ CSS কাস্টমাইজেশন এবং Lists এর জন্য আকর্ষণীয় স্টাইলিং ওয়েব পেজকে আরও প্রফেশনাল এবং ব্যবহারকারী বান্ধব করে তোলে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
